<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/>
    <link rel="stylesheet" href="../../css/pop-ups.css"/>
    <link rel="stylesheet" href="../../css/comment.css"/>

    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <title>另类数据可视化</title>
    <style>

        body {
            background-color: white
        }

        .placeholder-top {
            background: rgba(255, 255, 255, 0);
            z-index: 1;
        }

        .data-research-head {
            height: 3rem;
            width: 7.5rem;
        }

        .data-research-img {
            min-height: 3rem;
        }

        .data-research-img img {
            width: 100%;
            height: 3rem;
        }


        .data-research-charts {
            padding: 0 0.32rem;
        }

        .data-research-chart {
            height: 4.8rem;
            width: 100%;
        }

        .data-research-wrap {
            height: 0.72rem;
            width: 7.5rem;
            background-color: white;
        }

        .data-research-menu {
            margin: 0 0.32rem;
            width: 100%;
            color: rgba(34, 34, 34, 0.7);
        }

        .data-research-line {
            width: 0.36rem;
            height: 0.06rem;
            border-radius: 2px;
            margin-top: 0.06rem;
        }

        .data-research-tactive {
            color: #2C68FF;
            font-weight: bold;
        }

        .data-research-lactive {
            background-color: #2C68FF;
        }

        .data-research-desc {
            width: 7.5rem;
            height: 0.6rem;
            background-color: #F5F6FA;
        }

        .data-research-descarea {
            padding: 0 0.32rem;
            color: rgba(34, 34, 34, 0.7);
        }

        .data-research-word {
            width: 5.5rem;
        }

        .data-research-open {
            padding-left: 0.1rem;
            color: #2C68FF;
        }


        .data-research-em {
            padding: 0.36rem 0.32rem 0.28rem 0.32rem;
            background-color: white;
            color: #222222;
        }

        .data-research-titem {
            border: 1px solid #E5E5E5;
            height: 0.44rem;
            width: 1.64rem;
            color: rgba(25, 25, 25, 0.6);
        }

        .data-research-tabactive {
            border: 1px solid #2C68FF;
            color: #2C68FF;
        }

        .data-research-lb {
            border-radius: 2px 0px 0px 2px;
        }

        .data-research-rb {
            border-radius: 0px 2px 2px 0px;
        }

        .data-research-pad {
            padding: 0.24rem 0.32rem;
        }

        .data-research-valbag {
            background-color: #F5F6FA;
            padding: 0.24rem;
            color: #222222;
        }

        .data-research-report {
            background-color: #FEFEFE;
            padding: 0.2rem 0.16rem;
            color: #222222;
            line-height: 0.36rem;
        }

        .data-research-report img {
            height: 0.24rem;
            width: 0.46rem;
        }

        .data-research-f4 {
            height: 0.12rem;
            width: 100%;
            background-color: #F4F4F4;
        }

        .data-research-init {
            width: 3rem;
        }

        .data-research-month {
            color: #798EC4;
        }

        .data-research-year {
            width: 2rem;
        }

        .data-research-ring {
            width: 2rem;
        }

        .data-research-valn {
            color: #999999;
            font-weight: bold;
        }

        .data-research-vals {
            color: #E95047;
            font-weight: bold;
        }

        .data-research-valx {
            color: #16B270;
            font-weight: bold;
        }

        .data-research-ms {
            padding: 0.2rem 0.32rem;
        }

        .data-research-divid {
            height: 1px;
            width: 100%;
            background-color: #F2F2F2
        }

        .data-research-lcpd {
            padding: 0 0.32rem 0.2rem 0.32rem;
            color: #222222;
        }

        .data-research-date {
            margin-left: 0.06rem;
            margin-top: 0.28rem;
        }

        .data-research-circle {
            margin-right: 0.22rem;
            height: 0.2rem;
            width: 0.2rem;
            border-radius: 5rem;
            border-radius: 5rem;
            border: 3px solid #2C68FF;
            background-color: white;
        }

        .data-research-rq {
            color: #798EC4;
        }

        .data-research-dp {
            color: #2D2C3A;
            line-height: 0.44rem;
            margin-left: 0.45rem
        }

        .data-research-zk {
            color: #2C68FF;
            padding-left: 0.2rem;
        }

    </style>
</head>
<body>

<div class="flex-column h-100-p ff400">
    <!--状态栏-->
    <div class="placeholder-top pos-f">
        <!--状态栏-->
        <div class="status-bar pos-f"></div>
        <!--标题栏-->
        <div class="nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>

            <div class="right-bar"></div>
            <!--<div class="right-bar" style="color: #FFFFFF;" onclick="dealShare()">-->
            <!--    <span class="iconfont iconfenxiang1 fs16"></span>-->
            <!--</div>-->
        </div>
    </div>

    <div class="flex-1 mescroll flex-column" id="mescroll" >

        <div class="data-research-head pos-r">
            <div class="data-research-img"><img src="../../images/data/data-research.png"></div>
        </div>

        <div class="pos-r">
            <!--挖机、重卡顶部数据-->
            <div class="data-research-wrap flex-row align-items-center">
                <div class="data-research-menu">
                    <div class="data-research-menuinner flex-row justify-content-between">
                        <!--<div class="flex-column align-items-center">-->
                        <!--    <div class="data-research-title data-research-tactive">挖掘机指数</div>-->
                        <!--    <div class="data-research-line data-research-lactive"></div>-->
                        <!--</div>-->
                        <!--<div class="flex-column align-items-center">-->
                        <!--    <div class="data-research-title">重卡指数</div>-->
                        <!--    <div class="data-research-line"></div>-->
                        <!--</div>-->
                        <!--<div class="flex-column align-items-center">-->
                        <!--    <div class="data-research-title">乘用车指数</div>-->
                        <!--    <div class="data-research-line"></div>-->
                        <!--</div>-->
                        <!--<div class="flex-column align-items-center">-->
                        <!--    <div class="data-research-title">造车指数</div>-->
                        <!--    <div class="data-research-line"></div>-->
                        <!--</div>-->

                    </div>
                </div>
            </div>
            <!--另类数据简介-->
            <div class="data-research-desc flex-column align-items-center justify-content-center">
                <div class="data-research-descarea flex-column fs12">

                </div>
            </div>
            <!--EMAI、HTMAI-->
            <div class="data-research-em fs16 ff500">
                <!--<div class="">EMAI 8月数据</div>-->
            </div>
            <!--table页-->
            <div class="data-research-tab  fs12">
            </div>

            <!--图表区域-->
            <div class="data-research-charts mt15">
                <!---------------------------------------- 挖掘机指数  ------------------------------------>
                <!--产销量-->
                <div id="data-research-cxl1" class="data-research-chart data-research-cxl1">

                </div>

                <!--挖掘机产量-->
                <div id="data-research-wjcl1" class="data-research-chart data-research-wjcl1" style="display: none">

                </div>

                <!--挖掘机销量-->
                <div id="data-research-wjxl1" class="data-research-chart data-research-wjxl1" style="display: none">

                </div>

                <!--GDP-->
                <div id="data-research-gdp1" class="data-research-chart data-research-gdp1" style="display: none">

                </div>

                <!--------------------------------------------------重卡指数-------------------------------->
                <!--产销量-->
                <div id="data-research-cxl2" class="data-research-chart data-research-cxl2" style="display: none">

                </div>


                <!--挖掘机产量-->
                <div id="data-research-wjcl2" class="data-research-chart data-research-wjcl2" style="display: none">

                </div>

                <!--挖掘机销量-->
                <div id="data-research-wjxl2" class="data-research-chart data-research-wjxl2" style="display: none">

                </div>

                <!--GDP-->
                <div id="data-research-gdp2" class="data-research-chart data-research-gdp2" style="display: none">

                </div>

            </div>


            <!-- 初值、终值 最新研报-->
            <div class="data-research-val">
                <div class="data-research-pad">
                    <div class="data-research-valbag">
                        <div class="data-research-rate">
                        </div>
                        <div class="mt15">最新研报</div>
                        <!--<div class="data-research-report mt5">-->
                        <!--    <img class="mr5"  src=' https://storage.360buyimg.com/jtzx/2802aa07-7ebe-49d7-bee0-d871daa7b08f.png '/>-->
                        <!--    <span></span>-->
                        <!--</div>-->
                    </div>
                </div>

            </div>

            <div class="data-research-f4"></div>

            <!--最新点评-->
            <div class="data-research-lc">

                <div class="ff500 fs16 data-research-ms">最新点评</div>
                <div class="data-research-divid"></div>
                <div class="data-research-lcpd">

                    <div class="data-research-citem">
                        <div class="data-research-date flex-row align-items-center">
                            <div class="data-research-circle"></div>
                            <div class="data-research-rq">2020-08</div>
                        </div>
                        <div class="data-research-dp mt10">
                            <span class="data-research-comment"></span>
                            <span class="data-research-zk" onclick="loadComment()">展开</span>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </div>

    <div class="comment-area">
    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script src="../../js/echarts.min.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>
<script>
  let pm = {
    pageNum: 1,
    isScroll: true,
    isLogin: false,
    extType: 1,
    innType: 1,
    infoType: '8',
    datasource: '2',
    infoId: '999999999',
    title: '另类数据可视化',
    comment: '2020年8月HTMAI初值为138，同比增长43%，环比下降9%。数科研究院宏观研究员薛瑶表示：受春节叠加疫情影响，2020年伊始HTMAI指数连续两月下跌幅度较大。3至7月，随着复工复产，HTMAI指数大幅反弹并保持高位。整体来看，全国重卡企业的生产仍十分旺盛。同时，鉴于疫情期间积压的订单需求已逐渐得到消化，本月增速有所放缓。考虑到未来国内循环逐渐趋于平稳，相关行业也将逐步回归常态。结合当前的宏观政策，数科研究院宏观研究员姜传钺指出，短期看HTMAI与投资指标（尤其是房地产和基建投资）的相关度很高。8月指数虽有所回落，但仍保持40%以上同比增速。在逆周期调节力度加强的情况下，地产和基建投资提升对经济的拉动显著增强。展望下半年，项目审批、价格走势以及资金来源等数据支持投资向好，预计重卡、挖掘机等工程设备销售旺盛。'
  }
  menuInfos = [
    {
      firstCode: 1,
      name: '挖掘机指数',
      childList: [{secondCode: 1, name: '产销量'}, {secondCode: 2, name: '挖掘机产量'}, {secondCode: 3, name: '挖掘机销量'}, {secondCode: 4, name: 'GDP'}]
    },
    {firstCode: 2, name: '重卡指数', childList: [{secondCode: 1, name: '产销量'}, {secondCode: 2, name: '重卡产量'}, {secondCode: 3, name: '重卡销量'}, {secondCode: 4, name: 'GDP'}]},
    {firstCode: 3, name: '乘用车指数', childList: []},
    {firstCode: 4, name: '造车指数', childList: []},
  ]
  // 挖掘机指数
  pm[1] = {
    desc: '京东数科-挖掘机生产活跃度指数（Excavator Manufacturing Activity Index, EMAI）利用人工智能技术对多源大数据进行挖掘与融合。该指数旨在捕捉挖掘机制造企业的生产活跃度情况，为基建、地产及宏观景气分析提供时间上具有领先性的指标。 EMAI以2018年12月数据为基点（100），于每月4日发布上月结果，先于当前挖掘机产量、销量披露1-2周，所覆盖企业的国内市场份额合计约80%，具有较好的代表性。观测结果显示，EMAI与月度挖掘机产量、销量拟合度较高，与GDP的相关性也较强。',
    title: 'EMAI 8月数据',
    tb1: {val: '- -', col: 'data-research-valn'},
    hb1: {val: '- -', col: 'data-research-valn'},
    tb2: {val: '+9%', col: 'data-research-vals'},
    hb2: {val: '-5%', col: 'data-research-valx'},
    // 日期轴
    data1: ['2018-12', '2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06','2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06','2020-07','2020-08'],
    //EMAI
    data2: [100.0, 106.8, 85.3, 108.2, 107.5, 100.5, 93.7, 95.2, 93.7, 99.1, 96.5, 108.2, 111.2, 86.6, 67.0, 118.4, 123.6, 120.3, 113.0, 107.9, 102.1],
    // 挖掘机产量
    data3: [28822, '', 49534, 33877, 30825, 24209, 21378, 15813, 17540, 21957, 24889, 26180, 28720, '', 27629, 31101, 43622, 40420, 33970, 25275, 27006],
    //挖掘机销量
    data4: [16027, 11756, 18745, 44278, 28410, 18897, 15121, 12346, 13843, 15799, 17027, 19316, 20155, 9942, 9280, 49408, 45426, 31744, 24625, 19100, 20939],
    // 散点图
    data5: [258808.9, '', '', 218062.8, '', '', 242573.9, '', '', 252208.7, '', '', 278019.7, '', '', 206504.3, '', '', 250109.7]
  }
  // 挖掘机指数产销量
  pm[1][1] = {
    id: 'data-research-cxl1',
    data1: pm[1].data1,
    series: [{
      name: 'EMAI',
      type: 'line',
      smooth: true,
      color: '#EF4244',
      yAxisIndex: 0,
      data: pm[1].data2,
    }, {
      name: '挖掘机产量',
      type: 'bar',
      color: '#4F81FF',
      yAxisIndex: 1,
      data: pm[1].data3,
    }, {
      name: '挖掘机销量',
      type: 'bar',
      color: '#FF9523',
      yAxisIndex: 1,
      width: '2px',
      data: pm[1].data4
    }],
  }
  // 挖掘机指数 挖掘机产量
  pm[1][2] = {
    id: 'data-research-wjcl1',
    data1: pm[1].data1,
    series: [{
      name: 'EMAI',
      type: 'line',
      smooth: true,
      color: '#EF4244',
      yAxisIndex: 0,
      data: pm[1].data2,
    }, {
      name: '挖掘机产量',
      type: 'bar',
      color: '#4F81FF',
      yAxisIndex: 1,
      data: pm[1].data3,
    }],
  }
  // 挖掘机指数 挖掘机销量
  pm[1][3] = {
    id: 'data-research-wjxl1',
    data1: pm[1].data1,
    series: [{
      name: 'EMAI',
      type: 'line',
      smooth: true,
      color: '#EF4244',
      yAxisIndex: 0,
      data: pm[1].data2,
    }, {
      name: '挖掘机销量',
      type: 'bar',
      color: '#FF9523',
      yAxisIndex: 1,
      width: '2px',
      data: pm[1].data4
    }],
  }
  // GDP
  // 挖掘机指数 挖掘机销量
  pm[1][4] = {
    id: 'data-research-gdp1',
    data1: pm[1].data1,
    series: [{
      name: 'EMAI',
      type: 'line',
      smooth: true,
      color: '#EF4244',
      yAxisIndex: 0,
      data: pm[1].data2,
    }, {
      name: 'GDP',
      type: 'scatter',
      color: '#FF9523',
      yAxisIndex: 1,
      width: '2px',
      data: pm[1].data5
    }],
  }

  pm[2] = {
    desc: '京东数科-重型卡车生产活跃度指数（Heavy Truck Manufacturing Activity Index, 以下简称HTMAI）旨在捕捉重型卡车制造企业的生产活跃度，为基建、地产、物流行业研究及宏观景气度预测提供领先性指标。HTMAI以2018年12月数据为基础（100），每月28日前后发布当月结果初值，并于次月5日前后发布终值，早于现有重型卡车产量、销量披露渠道1-2周。指数覆盖的样本企业占全国市场份额约90%，具有很强的代表性。观测结果显示，HTMAI与重型卡车产量、销量一致性较高，与GDP等宏观经济指标的相关性也很高。',
    title: 'HTMAI 8月数据',
    tb1: {val: '+43%', col: 'data-research-vals'},
    hb1: {val: '-9%', col: 'data-research-valx'},
    tb2: {val: '+42%', col: 'data-research-vals'},
    hb2: {val: '-9%', col: 'data-research-valx'},
    data1: ['2018-12', '2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06','2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06','2020-07','2020-08'],
    // HTMAI(初值)
    data2: [100.0, 113.4, 86.6, 111.6, 111.1, 105.1, 92.7, 86.2, 94.8, 102.5, 102.5, 118.3, 123.3, 99.9, 58.9, 123.6, 139.4, 155.1, 158.7, 154.5, 137.8],
    // HTMAI(终值)
    data3: [100.0, 110.6, 88.1, 112.2, 110.6, 105.4, 94.4, 86.6, 96.4, 100.4, 103.3, 118.4, 123.3, 99.4, 62.5, 124.7, 139.8, 155.3, 158.0, 151.3, 137.1],
    // 重卡产量
    data4: [98528, 104853, 73495, 134590, 117914, 114448, 86680, 65766, 71690, 81295, 91216, 119095, 131926, 102104, 37171, 123001, 174870, 176341, 170570, 153187, 124994],
    // 重卡销量
    data5: [80000, 96000, 75000, 144000, 121000, 109000, 100000, 76000, 73000, 83000, 90000, 94000, 90000, 117000, 39000, 113000, 191000, 179000, 169000, 140000, 128000],
    // GDP
    data6: [258808.9, '', '', 218062.8, '', '', 242573.9, '', '', 252208.7, '', '', 278019.7, '', '', 206504.3, '', '', 250109.7]
  }
  // 重卡指数 产销量
  pm[2][1] = {
    id: 'data-research-cxl2',
    data1: pm[1].data1,
    series: [{
      name: 'HTMAI(初值)',
      type: 'line',
      smooth: true,
      color: '#EF4244',
      yAxisIndex: 0,
      data: pm[2].data2,
    }, {
      name: 'HTMAI(终值)',
      type: 'line',
      smooth: true,
      color: '#969AB2',
      yAxisIndex: 0,
      data: pm[2].data3,
    }, {
      name: '重卡产量',
      type: 'bar',
      color: '#4F81FF',
      yAxisIndex: 1,
      data: pm[2].data4,
    }, {
      name: '重卡销量',
      type: 'bar',
      color: '#FF9523',
      yAxisIndex: 1,
      width: '2px',
      data: pm[2].data5
    }],
  }
  // 重卡指数 重卡产量
  pm[2][2] = {
    id: 'data-research-wjcl2',
    data1: pm[2].data1,
    series: [{
      name: 'HTMAI(初值)',
      type: 'line',
      smooth: true,
      color: '#EF4244',
      yAxisIndex: 0,
      data: pm[2].data2,
    }, {
      name: 'HTMAI(终值)',
      type: 'line',
      smooth: true,
      color: '#969AB2',
      yAxisIndex: 0,
      data: pm[2].data3,
    }, {
      name: '重卡产量',
      type: 'bar',
      color: '#4F81FF',
      yAxisIndex: 1,
      data: pm[2].data4,
    }],
  }
  // 重卡指数 重卡销量
  pm[2][3] = {
    id: 'data-research-wjxl2',
    data1: pm[1].data1,
    series: [{
      name: 'HTMAI(初值)',
      type: 'line',
      smooth: true,
      color: '#EF4244',
      yAxisIndex: 0,
      data: pm[2].data2,
    }, {
      name: 'HTMAI(终值)',
      type: 'line',
      smooth: true,
      color: '#969AB2',
      yAxisIndex: 0,
      data: pm[2].data3,
    }, {
      name: '重卡产量',
      type: 'bar',
      color: '#4F81FF',
      yAxisIndex: 1,
      data: pm[2].data4,
    }, {
      name: '重卡销量',
      type: 'bar',
      color: '#FF9523',
      yAxisIndex: 1,
      width: '2px',
      data: pm[2].data5
    }]
  }
  // GDP
  pm[2][4] = {
    id: 'data-research-gdp2',
    data1: pm[2].data1,
    series: [{
      name: 'HTMAI(初值)',
      type: 'line',
      smooth: true,
      color: '#EF4244',
      yAxisIndex: 0,
      data: pm[2].data2,
    }, {
      name: 'HTMAI(终值)',
      type: 'line',
      smooth: true,
      color: '#969AB2',
      yAxisIndex: 0,
      data: pm[2].data3,
    }, {
      name: 'GDP',
      type: 'scatter',
      color: '#FF9523',
      yAxisIndex: 1,
      width: '2px',
      data: pm[2].data5
    }],
  }


  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.isLogin = !user.isGuest
    pageScroll()
    refreshAchive()
    //下拉刷新、滚动加载
    //meScroll = Template.createNoScroll({
    //  id: 'mescroll', //区域ID
    //  pageNum: pm.pageSize,
    //  downCallback: refreshAchive, //下拉刷新入口
    //})
  }

  function startPage() {
    pm.isLogin = !user.isGuest
    getCommentInfo()
  }

  function reLoadPage() {
    pm.isLogin = !user.isGuest
    refreshAchive()
  }


  function refreshAchive() {
    pm.pageNum = 1
    getResearch()
    initMenu()
    excavatorOutSales()
    getCommentInfo()
    $('.data-research-comment').text(pm.comment.substring(0, 115))
  }

  // 初始化菜单
  function initMenu() {
    // 一级菜单
    let htmlStr = ''
    let htmlStrDesc = ''
    let htmlTitle = ''
    let htmlRate = ''
    $('.data-research-tab').html('')
    menuInfos.forEach((item, k) => {
      htmlStrDesc += `<div class="data-research-descitem data-research-descitem${item.firstCode} flex-row align-items-center" style="display: none">
                        <div>简介：</div>
                        <div class="data-research-word line1">${pm[pm.extType].desc}</div>
                        <div class="data-research-open" onclick="Template.bottomPop('','${pm[pm.extType].desc}')">展开</div>
                    </div>`

      htmlTitle += `<div class="data-research-m${item.firstCode}" style="display: none">${pm[pm.extType].title}</div>`

      if (k < 2) {
        htmlRate += `<div class="data-research-ratio data-research-ratio${item.firstCode}" style="display: none">
                                <div class="flex-row align-items-center">
                                    <div class="data-research-init"><span class="fs16 ff500">初值</span><span class="data-research-month ml5 fs12">（当月底发布）</span></div>
                                    <div class="data-research-year ta-left"><span class="fs12">同比</span><span class="ml5 fs17 ${pm[item.firstCode].tb1.col}">${pm[item.firstCode].tb1.val}</span></div>
                                    <div class="data-research-ring ta-left ml5"> <span class="fs12">环比</span><span class="ml5 fs17 ${pm[item.firstCode].hb1.col}">${pm[item.firstCode].hb1.val}</span></div>
                                </div>

                                <div class="flex-row align-items-center mt10">
                                    <div class="data-research-init"><span class="fs16 ff500">终值</span><span class="data-research-month ml5 fs12">（次月底发布）</span></div>
                                    <div class="data-research-year ta-left"><span class="fs12">同比</span><span class="ml5 fs17 ${pm[item.firstCode].tb2.col}">${pm[item.firstCode].tb2.val}</span></div>
                                    <div class="data-research-ring ta-left ml5"> <span class="fs12">环比</span><span class="ml5 fs17 ${pm[item.firstCode].hb2.col}">${pm[item.firstCode].hb2.val}</span></div>
                                </div>
                            </div>`
      }

      htmlStr += ` <div class="flex-column align-items-center" onclick="changeColumn('${item.firstCode}')">
                        <div class="data-research-title ${pm.extType === item.firstCode ? 'data-research-tactive' : ''}">${item.name}</div>
                        <div class="data-research-line  ${pm.extType === item.firstCode ? 'data-research-lactive' : ''} "></div>
                   </div>`
      $('.data-research-tab').append(`<div class="data-research-label flex-row align-items-center justify-content-center data-research-label${item.firstCode} " style="display: none"></div>`)
      item.childList.forEach((it, index) => {
        let htmlStr2 = `<div class="data-research-titem ${index === 0 ? 'data-research-lb' : ''}  ${(item.childList.length - 1) === index ? 'data-research-rb' : ''}   ${pm.extType === item.firstCode && pm.innType === it.secondCode ? 'data-research-tabactive' : ''}    flex-row align-items-center justify-content-center" onclick="changeChild('${it.secondCode}')">
                            <div>${it.name}</div>
                        </div>`
        $('.data-research-label' + item.firstCode).append(htmlStr2)
      })
    })
    // 一级菜单 挖掘机指数、重卡指数、乘用车指数、造车指数
    $('.data-research-descarea').html(htmlStrDesc)
    $('.data-research-em').html(htmlTitle)
    $('.data-research-menuinner').html(htmlStr)
    $('.data-research-rate').html(htmlRate)

    //显示table
    $('.data-research-label' + pm.extType).show()
    $('.data-research-m' + pm.extType).show()
    $('.data-research-descitem' + pm.extType).show()
    $('.data-research-ratio' + pm.extType).show()
  }


  function changeColumn(num) {
    num = parseInt(num)
    // 3 和 4 乘用车指数和造车指数暂无数据
    if (num === 3 || num === 4) {
      jsBridge.callBridge('toast', {msg: '敬请期待'})
      return
    }
    if (num !== pm.extType) {
      pm.extType = num
      pm.innType = 1
      initMenu()
      excavatorOutSales()
    }
  }

  function changeChild(num) {
    num = parseInt(num)
    pm.innType = num
    initMenu()
    excavatorOutSales()
  }

  //产销量
  function excavatorOutSales() {
    $('.data-research-chart').hide()
    $('#' + pm[pm.extType][pm.innType].id).show()
    let myChart = echarts.init(document.getElementById(pm[pm.extType][pm.innType].id))
    let option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis',
        confine: true,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [{
        data: pm[pm.extType][pm.innType].data1,
        axisLine: {show: false},
        axisTick: {show: false},
        axisLabel: {
          textStyle: {
            color: 'rgba(34,34,34,0.45)'
          }
        }
      }],
      yAxis: [
        {
          title: {
            text: '',
            style: {
              color: 'rgba(34,34,34,0.45)'
            }
          },
          axisLine: {show: false},
          axisTick: {show: false},
          axisLabel: {
            textStyle: {
              color: 'rgba(34,34,34,0.45)'
            },
          },
          scale: true
        },
        {
          title: {
            text: '',
            style: {
              color: 'rgba(34,34,34,0.45)'
            }
          },
          axisLine: {show: false},
          axisTick: {show: false},
          labels: {
            format: '{value}',
            style: {
              color: 'rgba(34,34,34,0.45)'
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(34,34,34,0.45)'
            },
          },
          splitLine: {
            show: false,
          },
          scale: true
        }],
      legend: {
        icon: 'emptyCircle',
        left: 'auto',
        type: 'scroll',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {color: 'rgba(34,34,34,0.7)', fontSize: '12', lineHeight: '12'}
      },
      series: pm[pm.extType][pm.innType].series
    }
    myChart.setOption(option)
  }

  function loadComment() {
    $('.data-research-dp').html(pm.comment)

  }

  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop
    if (scrollTop < 64) {
      currStop = scrollTop
      $('.center-bar').html('')
      $('.left-bar').css({
        'color': 'rgb(255,255,255)'
      })
      $('.right-bar').css({
        'color': 'rgb(255,255,255)'
      })
    } else {
      currStop = 64
      $('.center-bar').html(pm.title)
      $('.left-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
      $('.right-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
    }
    $('.placeholder-top').css({
      'background': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
    })
  }

  /**
   * @param callback 翻页回调函数
   */
  function pageScroll() {
    //需要特殊处理的滚动区域，需要放在scroller元素区域内
    $('.mescroll').scroll(function () {
      let scrollTop = $(this).scrollTop()

      dealHead(scrollTop)

    })
  }


  function dealShare() {
    let item = {
      title: 'title',
      content: 'content',
      url: dict.SHARE_HOST + 'app/common/index.html#/index?id=' + pm.infoId + '&type=' + pm.infoType + '&version=' + dict.version,
      image: 'image',
      type: 'url'
    }
    Template.shareWindow(item)
  }

  // 加载评论列表
  function goComment() {
    goCommentList({infoId: pm.infoId, infoType: pm.infoType})
  }

  function writeComment() {
    // 只有APP端，才允许唤起分享
    if (pm.isLogin) {
      $('.comment-show').show()
      $('.comment-content').focus()
    } else {
      Utils.goLogin()
    }
  }

  // 添加评论
  function addCommentInfo() {
    Server.infoDetail.addCommentInfo({
      commentObjectId: pm.infoId,
      objectSource: pm.infoType,
      datasource: pm.datasource,
      content: $('.comment-content').val(),
    }).then(function (data) {
      if (data.code === 0) {
        jsBridge.callBridge('toast', {msg: '评论成功'})
        $('.comment-content').val('')
        // 跳转到评论列表
        goComment()
      }
    })
  }


  function showInput(v) {
    if (v === 0) {//取消发布
      $('.comment-show').hide()
    } else if (v === 1) { //发布评论
      if ($('.comment-content').val() && $('.comment-content').val().trim()) {//如果有内容，则添加评论
        addCommentInfo()
        showInput(0)
      } else {//弹出内容不能为空
        jsBridge.callBridge('toast', {msg: '评论不能为空'})
      }
    }
  }

  function getResearch() {
    Server.indexReport.getInfoListForResearch({
      pageNum: 1,
      pageSize: 1,
      infoType: 8,
      dataSource: ''
    }).then(function (data) {
      let jsonStr = JSON.stringify({
        infoId: data.infoListForResearchs[0].infoId,
        infoType: data.infoListForResearchs[0].infoType
      })
      $('.data-research-valbag').append('<div class="data-research-report mt5" onclick=\'goDetail(' + jsonStr + ')\'> <img class="mr5"  src="https://zzb.jddglobal.com/customer/manager/download/zzb/png/2802aa07-7ebe-49d7-bee0-d871daa7b08f.png"/> <span>' + data.infoListForResearchs[0].mainTitle + '</span></div>')
    })
  }


  // 获取评论数点赞数
  function getCommentInfo() {
    Server.infoDetail.getCommentInfo({
      infoId: pm.infoId
    }).then(function (data) {
      pm.commentCnt = data.commentCount
      pm.thumbsupCnt = data.thumbCount
      $('.comment-area').html(Template.commentDetail(pm.commentCnt, pm.thumbsupCnt, 0, 1))
    })
  }


</script>
</html>
